<template>

  <!-- 搜索框 -->
  <el-card style="height: 80px">
    <el-form :model="queryForm" :inline="true" class="form">
      <el-form-item label="标题:">
        <el-input
            v-model="queryForm.queryTitle"
            placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="教练:">
        <el-input
            v-model="queryForm.queryTrainerName"
            placeholder="请输入教练名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程状态:">
        <el-select
            v-model="queryForm.queryState"
            placeholder="请选择课程状态"
            style="width: 100px"
            filterable
        >
          <el-option label="全部" :value="0"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已停止" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程类型:">
        <el-select
            v-model="queryForm.queryCourseType"
            placeholder="请选择"
            style="width: 200px"
            filterable
        >
          <el-option label="全部" :value="0"></el-option>
          <el-option
              v-for="item in courseTypeList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>



  <el-card style="margin: 10px 0">

    <!-- table展示信息 -->
    <el-table
        style="margin: 10px 0"
        border
        :data="coursesTableData"
    >
      <el-table-column
          label="教练"
          align="center"
          prop="trainerName"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="标题"
          align="center"
          prop="title"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="描述"
          align="center"
          prop="description"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="人数(MAX)"
          align="center"
          prop="maxParticipants"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="开始时间"
          align="center"
          prop="startTime"
          :formatter="formatDate"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="结束时间"
          align="center"
          prop="endTime"
          :formatter="formatDate"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="课程时长(小时/h)"
          align="center"
          prop="duration"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="地点"
          align="center"
          prop="location"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="价格"
          align="center"
          prop="price"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="类型"
          align="center"
          prop="categoryName"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="图片"
          align="center"
          prop="img"
      >
        <template #default="{ row }">
          <el-image style="width: 100px; height: 100px;" :preview-src-list="[row.img]" :src="row.img"
                    fit="cover"/>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          prop="state"
          show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag
              :type="row.state === 2 ? 'success' : 'danger'"
              disable-transitions
          >{{ row.state === 2 ? '进行中' : '已停止' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="findAll"
        @size-change="handler"
    />
  </el-card>



</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {ElFormItem} from 'element-plus'
import {apiGet} from "@/utils/api.ts";
import {formatDate} from "@/utils/time.ts";
//获取用户相关
import {useUserStore} from '@/store/modules/user'

let userStore = useUserStore()
//搜索表单数据
let queryForm = reactive({
  queryTitle: '',
  queryTrainerName: '',
  queryState: 0,
  queryCourseType: 0,
  trainerId: 0,
})

//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(5)
//总个数
let total = ref<number>(0)
//存储全部用户的数组
let coursesTableData = ref([])
//存储全部类型的数组
let courseTypeList = ref<any>([])
//获取全部用户信息
let findAll = async (pager = 1) => {
  //收集当前页码
  pageNo.value = pager
  let parameter = {
    page: pageNo.value,
    limit: pageSize.value,
    title: queryForm.queryTitle,
    trainerName: queryForm.queryTrainerName,
    state: queryForm.queryState,
    courseType: queryForm.queryCourseType,
    userId: userStore.id,
    status: 1
  }
  //获取表单数据
  let {data} = await apiGet('/courses/findAllByUserId', parameter)
  total.value = data.count
  coursesTableData.value = data.data
}
//查询所有类型信息
const findAllCourseType = async () => {
  let {data} = await apiGet('/courseCategories/findAllCategories')
  courseTypeList.value = data
}

//分页器下拉菜单的自定义事件的回调
const handler = () => {
  findAll()
}

//搜索按钮的回调
const search = () => {
  findAll()
}

//组件挂载完毕
onMounted(() => {
  findAll()
  findAllCourseType()
})
</script>

<style scoped>
</style>
